<!--快捷导航 -->
<template>
  <div class="index-quicknav">
    <!-- 快捷导航上部分 -->
    <div class="index-quicknav-top">
      <mt-swipe :auto="0">
        <!-- 第一层 -->
        <mt-swipe-item v-for="(quickData, index) in quickDatas" :key="index">
          <ul>
            <!-- 第二层 -->
            <li v-for="item in quickData" :key="item.id">
              <img :src="item.pic" alt="" />
              <span>{{ item.title }}</span>
            </li>
          </ul>
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <!-- 快捷导航的下部分 -->
    <div class="index-quicknav-bottom">
      <div class="news">
        <img
          src="https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978466633.png"
          alt=""
        />
        <!-- 轮播 -->
        <div class="swiper-container newsSwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">服务店突破2000多家</div>
            <div class="swiper-slide">我们成为中国最大家电零售B2B2C系统</div>
            <div class="swiper-slide">三大国际腕表品牌签约</div>
          </div>
        </div>
        <!-- 指示箭头 -->
        <i class="iconfont icon-jiantou21"></i>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
// 引入Swiper的对象
import Swiper from "swiper";
import quicknavjson from "@/mock/quicknav.json";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      quickDatas: quicknavjson.homenavjson,
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    console.log(quicknavjson);
    // 在mounted
    // 实例swiper轮播时不能使用共同的类名,要使用后台选择器精准选择,或者再设置一个不重复的类名
    new Swiper(".newsSwiper", {
      // 垂直轮播
      direction: "vertical",
      loop: true,
      autoplay: {
        // 切换时间
        delay: 3000,
        // 切换到最后一个是否停止
        stopOnLastSlide: false,
        // 触摸后停止轮播
        disableOnInteraction: true,
      },
    });
  },
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，激活
  deactivated() {}, //如果页面有keep-alive缓存功能，非激活
};
</script>
<style lang="less">
.index-quicknav {
  // 上部分
  .index-quicknav-top {
    width: calc(100% - 2rem);
    margin: 1rem 1rem 0;
    height: 20.8rem;
    background-color: #fff;
    border-radius: 1rem 1rem 0 0;
    .mint-swipe {
      ul {
        height: 18rem;
        display: flex;
        align-items: center;
        //   弹性盒子换行
        flex-wrap: wrap;
        li {
          width: 20%;
          height: 8.9rem;
          text-align: center;
          font-size: 1.3rem;

          img {
            width: 7.1rem;
            height: 7.1rem;
          }
          span {
            display: block;
          }
        }
      }
      // 指示器的样式修改--作业
      .mint-swipe-indicators {
      }
    }
  }
  //   下部分
  .index-quicknav-bottom {
    width: calc(100% - 4rem);
    margin: 0 auto;
    padding: 0.7rem 1rem;
    height: 3.6rem;
    background-color: #fff;
    border-radius: 0 0 1rem 1rem;
    .news {
      border-top: 0.1rem solid rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      img {
        width: 7rem;
        height: 3.1rem;
      }
      .swiper-container {
        height: 3.6rem;
        line-height: 3.6rem;
        font-size: 1.4rem;
        font-weight: 700;
        padding-left: 0.5rem;
        .swiper-slide {
          // 单行文本省略号
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .icon-jiantou21 {
        font-size: 1.6rem;
        color: rgb(228, 49, 36);
        font-weight: 700;
        padding-left: 0.5rem;
      }
    }
  }
}
</style>